<template>
  <div class="dashboard-container">
    <!-- 房间管理标题 -->
    <h1 style="text-align: center; margin-bottom: 40px; font-size: 35px; color: #486180">房间管理</h1>

    <!-- 新增房间对话框 -->
    <el-dialog title="新增房间" :visible.sync="addButtonController" width="30%" @close="closeDialog('addForm')">
      <el-form label-width="20%" :model="addList" ref="addForm">
        <!-- 房间号输入框 -->
        <el-form-item label="房间号" prop="roomNumber">
          <el-input
            v-model="addList.roomNumber"
            maxlength="11"
            show-word-limit
            style="width: 80%"
            clearable
            placeholder="请输入房间号"
          />
        </el-form-item>
        <!-- 房间类型下拉框 -->
        <el-form-item label="房间类型" prop="roomTypeId">
          <el-select v-model="addList.roomTypeId" clearable placeholder="请选择房间类型" style="width: 80%"
          >
            <el-option v-for="item in roomsList" :key="item.roomTypeId" :label="`${item.roomTypeName} - ¥${item.roomPrice}`" :value="item.roomTypeId"
            />
          </el-select>
        </el-form-item>
        <!-- 备注输入框 -->
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="addList.remark"
            maxlength="100"
            show-word-limit
            style="width: 50%"
            clearable
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm('addForm')">确 定</el-button>  <!-- 更明确的按钮文字 -->
        <el-button @click="closeDialog('addForm')">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 修改房间对话框（类似新增） -->
    <el-dialog title="修改房间" :visible.sync="updateButtonController" width="30%" @close="closeDialog('editForm')">
      <!-- 表单结构与新增对话框类似，略去详细注释 -->
      <el-form label-width="20%" :model="updateList" ref="editForm">
        <!-- 省略表单项... -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditForm('editForm')">确 定</el-button>
        <el-button @click="closeDialog('editForm')">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="删除提示"
      :visible.sync="deleteButtonController"
      width="30%"
      @close="deleteButtonController = false"
    >
      <div style="text-align: center; margin: 20px 0;">
        <i class="el-icon-warning" style="color: #ff9900; font-size: 24px;"></i>
        <span style="margin-left: 10px;">确定要删除该房间吗？此操作不可恢复！</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
        <el-button @click="deleteButtonController = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 筛选区域 -->
    <div class="filter-container" style="margin-bottom: 20px; display: flex; align-items: center;">
      <!-- 新增按钮 -->
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        style="margin-right: 10px;"
        @click="showAddDialog"
      >
        新增
      </el-button>

      <!-- 房间号筛选 -->
      <el-input
        v-model="roomNumber"
        placeholder="房间号"
        clearable
        style="width: 180px; margin-right: 10px;"
      />

      <!-- 房间类型筛选 -->
      <el-select v-model="roomTypeId" clearable placeholder="房间类型" style="width: 150px; margin-right: 10px;">
        <el-option v-for="item in roomsList" :key="item.roomTypeId" :label="item.roomTypeName" :value="item.roomTypeId"/>
      </el-select>

      <!-- 查询按钮 -->
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="fetchRooms"
      >
        查询
      </el-button>

      <!-- 重置按钮 -->
      <el-button
        icon="el-icon-refresh"
        @click="resetFilters"
      >
        重置
      </el-button>
    </div>

    <!-- 房间表格 -->
    <el-table
      :data="roomList"
      border
      style="width: 100%;"
      max-height="650px"
      v-loading="loading"
    >
      <el-table-column prop="roomId" label="房间ID" width="80" align="center"/>
      <el-table-column prop="roomNumber" label="房间号" width="120" align="center"/>
      <el-table-column
        prop="roomTypeName"
        label="房间类型"
        width="150"
        align="center"
      />
      <el-table-column
        prop="roomPrice"
        label="价格(¥)"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          {{ `¥${parseFloat(scope.row.roomPrice).toFixed(2)}` }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center"/>
      <el-table-column label="操作" width="120" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
            style="color: #409EFF;"
          />
          <el-button
            type="text"
            icon="el-icon-delete"
            class="danger-text"
            @click="showDeleteDialog(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  deleteRoom,
  insertRoom,
  selectAllRoom,
  updateRoom
} from '@/api/room'
import { selectAllRoomType } from '@/api/roomType'

export default {
  name: 'RoomManagement',
  computed: {
    ...mapGetters(['userId', 'userName', 'roleName'])
  },
  data() {
    return {
      roomNumber: '',
      roomTypeId: '',
      roomTypeName: '',
      roomList: [],
      roomsList: [],
      loading: false,

      // 对话框控制
      addButtonController: false,
      updateButtonController: false,
      deleteButtonController: false,

      // 添加表单数据
      addList: {
        roomNumber: '',
        roomTypeId: '',
        remark: ''
      },

      // 修改表单数据
      updateList: {
        roomId: '',
        roomTypeId: '',
        roomNumber: '',
        remark: ''
      },

      // 当前操作的房间ID
      currentRoomId: null
    }
  },

  created() {
    this.fetchRooms()
    this.fetchRoomTypes()
  },

  methods: {
    // 获取所有房间类型
    fetchRoomTypes() {
      selectAllRoomType().then(res => {
        this.roomsList = res.data
      }).catch(err => {
        this.$message.error('获取房间类型失败')
        console.error(err)
      })
    },

    // 获取房间列表
    fetchRooms() {
      this.loading = true
      selectAllRoom({
        roomNumber: this.roomNumber,
        roomTypeId: this.roomTypeId
      }).then(res => {
        this.roomList = res.data
      }).catch(err => {
        this.$message.error('获取房间列表失败')
      }).finally(() => {
        this.loading = false
      })
    },

    // 显示新增对话框
    showAddDialog() {
      this.addList = {
        roomNumber: '',
        roomTypeId: '',
        remark: ''
      }
      this.addButtonController = true
    },

    // 显示修改对话框
    showEditDialog(row) {
      this.updateList = { ...row }
      this.updateButtonController = true
    },

    // 显示删除对话框
    showDeleteDialog(row) {
      this.currentRoomId = row.roomId
      this.deleteButtonController = true
    },

    // 提交新增表单
    submitAddForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          insertRoom(this.addList).then(() => {
            this.$message.success('新增成功')
            this.addButtonController = false
            this.fetchRooms()
          }).catch(err => {
            this.$message.error('新增失败')
            console.error(err)
          })
        }
      })
    },

    // 提交修改表单
    submitEditForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateRoom(this.updateList).then(() => {
            this.$message.success('修改成功')
            this.updateButtonController = false
            this.fetchRooms()
          }).catch(err => {
            this.$message.error('修改失败')
            console.error(err)
          })
        }
      })
    },

    // 确认删除
    confirmDelete() {
      deleteRoom({ roomId: this.currentRoomId }).then(() => {
        this.$message.success('删除成功')
        this.deleteButtonController = false
        this.fetchRooms()
      }).catch(err => {
        this.$message.error('删除失败')
        console.error(err)
      })
    },

    // 通用关闭对话框方法
    closeDialog(formName) {
      if (formName) {
        this.$refs[formName].resetFields()
      }
      this.addButtonController = false
      this.updateButtonController = false
    },

    // 重置筛选条件
    resetFilters() {
      this.roomNumber = ''
      this.roomTypeId = ''
      this.fetchRooms()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;

  .filter-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .danger-text {
    color: #F56C6C;
  }
}
</style>
